<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻管理系统</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet">
    <style type="text/css">
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 85%;
            margin: 0 auto;
            margin-top: 50px;
        }
        .block{
            width: 85%;
            margin: 0 auto;
            text-align: right;
        }
        .comm{
            margin-right: 10px;
        }
    </style>
</head>
<body>
<!-- 引入组件库 -->
<script type="text/javascript" src="js/emelent-ui.js"></script>
<div id="root">
    <div class="all">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>评论列表</span>
                <el-button style="float: right" type="primary" size="small" @click="goBack">返回新闻标题</el-button>
            </div>
            <div class="text item">
                <el-table
                        :data="list"
                        style="width: 100%"
                        border
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="id"
                            label="评论编号"
                            align="center"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            align="center"
                            label="评论内容"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="author"
                            align="center"
                            label="评论人"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="createDate"
                            align="center"
                            label="评论时间">
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data() {
            return {
                params : '',
                list : []
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            async getComment(){
                const { params } = this;
                const resp = await axios.get(`http://localhost:8080/newManagerSys/comment/list${params}`);
                let result = resp.data;
                if(result.code === 200){
                    const { data } = result;
                    this.list = data;
                }
            },
            goBack(){
                location.href = "index.html";
            }
        },
        mounted(){
            this.params = location.search;
            this.getComment();
        }
    })
</script>
</body>
</html>